<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>航空票务查询及订票系统</title>

    <!-- Custom fonts for this template -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/google-font.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/sb-admin-2.min.css}" rel="stylesheet">

    <!-- Custom styles for this page -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">
    <style>
        .alert {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 300px;
            max-width: 600px;
            transform: translate(-50%,-50%);
            z-index: 99999;
            text-align: center;
            padding: 15px;
            border-radius: 3px;
        }
        .fas:hover{
            cursor: pointer;
        }
    </style>
</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- 侧边栏 -->
    <ul th:replace="~{commons/commons::sideBar}"></ul>
    <!-- 侧边栏结束 -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- 顶部栏 -->
            <nav th:replace="~{commons/commons::topBar}"></nav>
            <!-- 顶部栏结束 -->


            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <h1  class="h3 mb-4 text-gray-800">地域、场地管理</h1>
                <p class="mb-4">
                    <i class="fas fa-plus-square"></i>
                    <i class="fas fa-edit"></i>
                    <i class="fas fa-trash-alt"></i>
                    <i class="fas fa-check"></i>
                    <i class="fas fa-times"></i>
                </p>
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 id="airportManagementTab" class="m-0 font-weight-bold text-primary">机场管理</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered" id="dataTable2" width="100%" cellspacing="0">
                            <thead>
                            <tr>
                                <th width="60px">ID</th>
                                <th>名称</th>
                                <th>城市</th>
                                <th>航站楼</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th width="60px"><input id="addAirportID" class="form-control" placeholder="IATI码"></th>
                                <th><input id="addAirportName" class="form-control" placeholder="名称"></th>
                                <th>
                                    <select id="addAirportCityID" class="form-control">
                                        <option th:each="city : ${cityMap.values()}" th:value="${city.cityID}" th:text="${city.cityName}"></option>
                                    </select>
                                </th>
                                <th></th>
                                <th class="text-center">
                                    <button id="addAirportBtn" class="btn-sm btn-primary btn-icon-split">
                                        <span class="icon text-white-50"><i class="fas fa-plus-square"></i></span>
                                    </button>
                                </th>
                            </tr>
                            </tfoot>
                            <tbody>
                            <tr th:each="airport : ${airports}">
                                <td width="60px" th:text="${airport.airportID}"></td>
                                <td th:id="airportName+(${airport.airportID})" th:text="${airport.airportName}"></td>
                                <td th:id="airportCityName+(${airport.airportID})" th:text="${cityMap.get(airport.cityID).cityName}"></td>
                                <td>
<!--                                    <span th:class="terminal+(${airport.airportID})+ ' badge-primary '+'badge '" th:each="termianl : ${airport.terminals}" th:text="${termianl.terminalName}+'航站楼'" style="margin-right: 5px"></span>-->
                                    <span th:each="termianl : ${airport.terminals}" class="badge badge-primary" style="margin-right: 8px">
                                        <span class="text" th:text="${termianl.terminalName}+'航站楼 '" style="margin-right: 5px"></span>
                                        <span class="icon text-white-50"><i th:onclick="modifyTerminal([[${termianl.terminalID}]],[[${termianl.terminalName}]])"  class="fas fa-edit" style="margin-right: 5px"></i></span>
                                        <span class="icon text-white-50"><i th:onclick="deleteTerminal([[${termianl.terminalID}]])" class="fas fa-trash"></i></span>
                                    </span>

                                    <i th:onclick="addTerminal([[${airport.airportID}]])" class="fas fa-plus-square float-right"></i>
                                </td>
                                <td class="text-center">
                                    <button th:onclick="modifyAirport([[${airport.airportID}]],[[${airport.cityID}]],this)" class="btn-sm btn-success btn-icon-split">
                                        <span class="icon text-white-50"><i class="fas fa-edit"></i></span>
                                    </button>
<!--                                    -->
                                    <button th:onclick="deleteAirport([[${airport.airportID}]]);" class="btn-sm btn-danger btn-icon-split">
                                        <span class="icon text-white-50"><i class="fas fa-trash-alt"></i></span>
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-7">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 id="cityManagementTab" class="m-0 font-weight-bold text-primary">城市管理</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-bordered" id="dataTable1" width="100%" cellspacing="0">
                                    <thead>
                                    <tr  width="90px">
                                        <th>ID</th>
                                        <th>城市名称</th>
                                        <th>国家或区域</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th width="90px"><input id="addCityID" name="addCityID" type="text" class="form-control" placeholder="城市代号"/></th>
                                        <th><input id="addCityName" name="cityName" type="text" class="form-control" placeholder="名称"/></th>
                                        <th>
                                            <select id="addCityCountryID" name="countryID" class="form-control" required>
                                                <option th:each="country : ${countryMap.values()}"  th:value="${country.countryID}" th:text="${country.countryName}"></option>
                                            </select>
                                        </th>
                                        <th class="text-center">
                                            <button id="addCityBtn" class="btn-sm btn-primary btn-icon-split">
                                                <span class="icon text-white-50"><i class="fas fa-plus-square"></i></span>
                                            </button>
                                        </th>
                                    </tr>
                                    </tfoot>
                                    <tbody>
                                    <tr th:each="city : ${cityMap.values()}">
                                        <td th:id="cityID+(${city.cityID})" width="90px" th:text="${city.cityID}"></td>
                                        <td th:id="cityName+(${city.cityID})" th:text="${city.cityName}"></td>
                                        <td th:id="cityCountryName+(${city.cityID})" th:text="${countryMap.get(city.countryID).countryName}"></td>
                                        <td class="text-center">
                                            <button th:onclick="modifyCity([[${city.cityID}]],[[${city.countryID}]],this)" class="btn-sm btn-success btn-icon-split">
                                                <span class="icon text-white-50"><i class="fas fa-edit"></i></span>
                                            </button>
                                            <button th:onclick="deleteCity([[${city.cityID}]]);" class="btn-sm btn-danger btn-icon-split">
                                                <span  class="icon text-white-50"><i class="fas fa-trash-alt"></i></span>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <!-- 国家及区域管理 -->
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 id="countryManagementTab" class="m-0 font-weight-bold text-primary">国家及区域管理</h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>名称</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tfoot>
                                        <tr>
                                            <th> </th>
                                            <th><input id="addCountryName" type="text" class="form-control form-text" placeholder="名称"/></th>
                                            <th class="text-center">
                                                <button id="addCountryBtn" class="btn-sm btn-primary btn-icon-split">
                                                    <span class="icon text-white-50"><i class="fas fa-plus-square"></i></span>
                                                </button>
                                            </th>
                                        </tr>
                                        </tfoot>
                                        <tbody>
                                        <tr th:each="country : ${countryMap.values()}">
                                            <td th:text="${country.countryID}"></td>
                                            <td th:id="countryName+(${country.countryID})" th:text="${country.countryName}"></td>
                                            <td class="text-center">
                                                <button th:onclick="'modifyCountry('+${country.countryID}+',this)'" class="btn-sm btn-success btn-icon-split">
                                                    <span class="icon text-white-50"><i class="fas fa-edit"></i></span>
                                                </button>
                                                <button th:onclick="'deleteCountry('+${country.countryID}+');'" class="btn-sm btn-danger btn-icon-split">
                                                    <span class="icon text-white-50"><i class="fas fa-trash-alt"></i></span>
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- End of Main Content -->
        <!-- 页脚 -->
        <footer th:replace="~{commons/commons::footer}"></footer>
        <!-- 页脚结束 -->
    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- 登出模态框 -->
<div th:replace="~{commons/commons::tmpModal}"></div>

<div class="alert"></div>
<!-- Bootstrap core JavaScript-->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
</script>

<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

<!-- Core plugin JavaScript-->
<script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

<!-- Custom scripts for all pages-->
<script th:src="@{/js/sb-admin-2.min.js}"></script>

<!-- Page level plugins -->
<script th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/vendor/datatables/dataTables.bootstrap4.min.js}"></script>

<!-- Page level custom scripts -->
<script th:src="@{/js/demo/location-datatables.js}"></script>
<script>
    $("#nav2").parent().addClass("active");
    $("#nav2").click();
</script>

<script>

</script>
</body>

</html>
